<template>
  <div class="testGrid">
    <h1 style="font-size:18px;">Grid 栅格</h1>
    <p>概述</p>
    <Row style="margin-bottom:5px;">
      <Col span="24">
        <div class="m">24：100%</div>
      </Col>
    </Row>
    <Row style="margin-bottom:5px;">
      <Col span="12">
        <div class="m">12：50%</div>
      </Col>
      <Col span="12">
        <div class="n">12：50%</div>
      </Col>
    </Row>
    <Row style="margin-bottom:5px;">
      <Col span="8">
        <div class="m">8：33.33%</div>
      </Col>
      <Col span="8">
        <div class="m">8：33.33%</div>
      </Col>
      <Col span="8">
        <div class="m">8：33.33%</div>
      </Col>
    </Row>
    <Row style="margin-bottom:5px;">
      <Col span="6">
        <div class="m">6：25%</div>
      </Col>
      <Col span="6">
        <div class="m">6：25%</div>
      </Col>
      <Col span="6">
        <div class="m">6：25%</div>
      </Col>
      <Col span="6">
        <div class="m">6：25%</div>
      </Col>
    </Row>
    <Row>
      <Col span="16">
        <div class="m">16：66.66%</div>
      </Col>
      <Col span="8">
        <div class="m">8：33.33%</div>
      </Col>
    </Row>
    <p>采用24栅格系统，对区域进行24等分，这样设计可应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。</p>
    <p>组件中定义了两个概念，行 <code>Row</code> 和列 <code>Col</code> ，具体用法如下： </p>
    <ul>
      <li>使用 <code>Row</code> 在水平方向创建一行</li>
      <li>将一组 <code>Col</code> 插入在 <code>Row</code> 中</li>
      <li>在每个 <code>Col</code> 中，键入自己的内容</li>
      <li>通过设置 <code>Col</code> 的 <code>span</code> 参数，指定跨越的范围，其范围是1到24</li>
      <li>每个 <code>Row</code> 中的 <code>Col</code> 总和应该为24</li>
    </ul>
    <h2>基础用法</h2>
    <div style="width:800px">
      <Row style="margin-bottom:5px;">
        <Col span="12"><div class="f">Col-12</div></Col>
        <Col span="12"><div class="f">Col-12</div></Col>
      </Row>
      <Row style="margin-bottom:5px;">
        <Col span="8"><div class="f">Col-8</div></Col>
        <Col span="8"><div class="f">Col-8</div></Col>
        <Col span="8"><div class="f">Col-8</div></Col>
      </Row>
      <Row>
        <Col span="6"><div class="f">Col-6</div></Col>
        <Col span="6"><div class="f">Col-6</div></Col>
        <Col span="6"><div class="f">Col-6</div></Col>
        <Col span="6"><div class="f">Col-6</div></Col>
      </Row>
    </div>
    <p>水平排列的布局</p>
    <p> <code>Col</code>组件必须写在 <code>Row</code>组件之间</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;12&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;12&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-8&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-8&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-8&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;6&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-6&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-6&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-6&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col-6&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>区块间隔</h2>
    <div style="width:800px">
      <Row :gutter="24">
        <Col span="12">
            <div class="f">Col-12</div>
        </Col>
        <Col span="12">
            <div class="f">Col-12</div>
        </Col>
      </Row>
      <Row :gutter="24" style="margin-top:24px;">
        <Col span="12">
            <div class="f">Col-12</div>
        </Col>
        <Col span="12">
            <div class="f">Col-12</div>
        </Col>
      </Row>
    </div>
    <p>通过给 <code>row</code> 添加 <code>gutter</code> 属性，可以给下属的 <code>col</code> 添加间距，推荐使用 (16+8n)px 作为栅格间隔。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;div style=&quot;width:800px&quot;&gt;
          &lt;Row :gutter=&quot;24&quot;&gt;
            &lt;Col span=&quot;12&quot;&gt;
                &lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;
            &lt;/Col&gt;
            &lt;Col span=&quot;12&quot;&gt;
                &lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;Row :gutter=&quot;24&quot; style=&quot;margin-top:24px;&quot;&gt;
            &lt;Col span=&quot;12&quot;&gt;
                &lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;
            &lt;/Col&gt;
            &lt;Col span=&quot;12&quot;&gt;
                &lt;div class=&quot;f&quot;&gt;Col-12&lt;/div&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>栅格顺序</h2>
    <div style="width:800px">
      <Row type="flex">
        <Col span="6" order="4"><div class="f">1 | order-4</div></Col>
        <Col span="6" order="3"><div class="f">2 | order-3</div></Col>
        <Col span="6" order="2"><div class="f">3 | order-2</div></Col>
        <Col span="6" order="1"><div class="f">4 | order-1</div></Col>
      </Row>
    </div>
    <p>在 <code>flex</code>模式下，通过设置 <code>order</code> 来改变栅格的顺序。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Row type=&quot;flex&quot;&gt;
          &lt;Col span=&quot;6&quot; order=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;1 | order-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot; order=&quot;3&quot;&gt;&lt;div class=&quot;f&quot;&gt;2 | order-3&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot; order=&quot;2&quot;&gt;&lt;div class=&quot;f&quot;&gt;3 | order-2&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot; order=&quot;1&quot;&gt;&lt;div class=&quot;f&quot;&gt;4 | order-1&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>栅格排序</h2>
    <div style="width:800px">
      <Row>
        <Col span="18" push="6"><div class="f">col-18 | push-6</div></Col>
        <Col span="6" pull="18"><div class="f">col-6 | pull-18</div></Col>
      </Row>
    </div>
    <p>通过设置 <code>push</code> 和 <code>pull</code> 来改变栅格的顺序。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;18&quot; push=&quot;6&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-18 | push-6&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot; pull=&quot;18&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-6 | pull-18&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>左右偏移</h2>
    <div style="width:800px">
      <Row style="background-color:#aaa;">
        <Col span="8"><div class="f">col-8</div></Col>
        <Col span="8" offset="8"><div class="f">col-8 | offset-8</div></Col>
      </Row>
      <br>
      <Row style="background-color:#aaa;">
        <Col span="6" offset="8"><div class="f">col-6 | offset-8</div></Col>
        <Col span="6" offset="4"><div class="f">col-6 | offset-4</div></Col>
      </Row>
      <br>
      <Row style="background-color:#aaa;">
        <Col span="12" offset="8"><div class="f">col-12 | offset-8</div></Col>
      </Row>
    </div>
    <p>通过设置 <code>offset</code> 属性，将列进行左右偏移，偏移栅格数为 <code>offset</code> 的值。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-8&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;8&quot; offset=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-8 | offset-8&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;6&quot; offset=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-6 | offset-8&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;6&quot; offset=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-6 | offset-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;Row&gt;
          &lt;Col span=&quot;12&quot; offset=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-12 | offset-8&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>栅格的flex布局</h2>
    <div style="width:800px">
      <p>子元素向左排列</p>
      <Row type="flex" justify="start" style="background-color:#aaa;">
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
      </Row>
      <br>
      <p>子元素向右排列</p>
      <Row type="flex" justify="end" style="background-color:#aaa;">
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
      </Row>
      <br>
      <p>子元素居中排列</p>
      <Row type="flex" justify="center" style="background-color:#aaa;">
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
      </Row>
      <br>
      <p>子元素等宽排列</p>
      <Row type="flex" justify="space-between" style="background-color:#aaa;">
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
      </Row>
      <br>
      <p>子元素分散排列</p>
      <Row type="flex" justify="space-around" style="background-color:#aaa;">
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
        <Col span="4"><div class="f">col-4</div></Col>
      </Row>
    </div>
    <p>通过给 <code>Row</code> 设置参数 <code>justify</code> 为不同的值，来定义子元素的排布方式。在 <code>flex</code> 模式下有效。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;p&gt;子元素向左排列&lt;/p&gt;
        &lt;Row type=&quot;flex&quot; justify=&quot;start&quot;&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;p&gt;子元素向右排列&lt;/p&gt;
        &lt;Row type=&quot;flex&quot; justify=&quot;end&quot;&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;p&gt;子元素居中排列&lt;/p&gt;
        &lt;Row type=&quot;flex&quot; justify=&quot;center&quot;&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;p&gt;子元素等宽排列&lt;/p&gt;
        &lt;Row type=&quot;flex&quot; justify=&quot;space-between&quot; &gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br&gt;
        &lt;p&gt;子元素分散排列&lt;/p&gt;
        &lt;Row type=&quot;flex&quot; justify=&quot;space-around&quot;&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>栅格的flex对齐</h2>
    <div style="width:800px">
      <p>顶部对齐</p>
      <Row type="flex" justify="center" align="top" style="background-color:#aaa;">
        <Col span="4"><div class="f" style="height: 80px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 30px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 100px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 60px">col-4</div></Col>
      </Row>
    </div>
    <br>
    <div style="width:800px">
      <p>底部对齐</p>
      <Row type="flex" justify="center" align="bottom" style="background-color:#aaa;">
        <Col span="4"><div class="f" style="height: 80px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 30px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 100px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 60px">col-4</div></Col>
      </Row>
    </div>
    <br>
    <div style="width:800px">
      <p>居中对齐</p>
      <Row type="flex" justify="center" align="middle" style="background-color:#aaa;">
        <Col span="4"><div class="f" style="height: 80px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 30px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 100px">col-4</div></Col>
        <Col span="4"><div class="f" style="height: 60px">col-4</div></Col>
      </Row>
    </div>
    <p>通过给 <code>row</code> 设置参数 <code>align</code> 为不同的值，来定义子元素在垂直方向上的排布方式。在 <code>flex</code> 模式下有效。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;div style=&quot;width:800px&quot;&gt;
          &lt;p&gt;顶部对齐&lt;/p&gt;
          &lt;Row type=&quot;flex&quot; justify=&quot;center&quot; align=&quot;top&quot;&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 80px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 30px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 100px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 60px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div style=&quot;width:800px&quot;&gt;
          &lt;p&gt;底部对齐&lt;/p&gt;
          &lt;Row type=&quot;flex&quot; justify=&quot;center&quot; align=&quot;bottom&quot;&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 80px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 30px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 100px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 60px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div style=&quot;width:800px&quot;&gt;
          &lt;p&gt;居中对齐&lt;/p&gt;
          &lt;Row type=&quot;flex&quot; justify=&quot;center&quot; align=&quot;middle&quot;&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 80px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 30px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 100px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
            &lt;Col span=&quot;4&quot;&gt;&lt;div class=&quot;f&quot; style=&quot;height: 60px&quot;&gt;col-4&lt;/div&gt;&lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>响应式布局</h2>
    <Row>
      <Col :xs="2" :sm="4" :md="6" :lg="8"><div class="f">Col</div></Col>
      <Col :xs="20" :sm="16" :md="12" :lg="8"><div class="f">Col</div></Col>
      <Col :xs="2" :sm="4" :md="6" :lg="8"><div class="f">Col</div></Col>
    </Row>
    <p>预设六个响应尺寸： <code>xs</code> 、<code>sm</code> 、<code>md</code> 、<code>lg</code> 、<code>xl</code> 、<code>xxl</code> ，详见 API。调整浏览器尺寸来查看效果。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Row&gt;
          &lt;Col :xs=&quot;2&quot; :sm=&quot;4&quot; :md=&quot;6&quot; :lg=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
          &lt;Col :xs=&quot;20&quot; :sm=&quot;16&quot; :md=&quot;12&quot; :lg=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
          &lt;Col :xs=&quot;2&quot; :sm=&quot;4&quot; :md=&quot;6&quot; :lg=&quot;8&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>其他属性的响应式</h2>
    <Row>
      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="f">Col</div></Col>
      <Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="f">Col</div></Col>
      <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }"><div class="f">Col</div></Col>
    </Row>
    <P> <code>span</code> 、<code>pull</code> 、<code>push</code> 、<code>offset</code> 、<code>order</code> 属性可以通过内嵌到 <code>xs</code> 、<code>sm</code> 、<code>md</code> 、<code>lg</code> 、<code>xl</code> 、<code>xxl</code> 属性中来使用。</P>
    <p>其中 <code>:xs="6"</code>  相当于 <code>:xs="{ span: 6 }"</code>。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Col :xs=&quot;{ span: 5, offset: 1 }&quot; :lg=&quot;{ span: 6, offset: 2 }&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
        &lt;Col :xs=&quot;{ span: 11, offset: 1 }&quot; :lg=&quot;{ span: 6, offset: 2 }&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
        &lt;Col :xs=&quot;{ span: 5, offset: 1 }&quot; :lg=&quot;{ span: 6, offset: 2 }&quot;&gt;&lt;div class=&quot;f&quot;&gt;Col&lt;/div&gt;&lt;/Col&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h1>API</h1>
    <p>Row props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Col props</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
export default {
  name: 'TestGrid',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          tooltip: true,
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'gutter',
          explain: '栅格间距，单位 px，左右平分',
          type: 'Number',
          default: '0'
        },
        {
          attribute: 'type',
          explain: '布局模式，可选值为flex或不选，在现代浏览器下有效',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'align',
          explain: 'flex 布局下的垂直对齐方式，可选值为top、middle、bottom',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'justify',
          explain: 'flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'class-name | class',
          explain: '自定义的class名称',
          type: 'String',
          default: '-'
        }
      ],
      tableColumn1: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 400,
          tooltip: true,
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData1: [
        {
          attribute: 'span',
          explain: '栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none',
          type: 'Number | String',
          default: '-'
        },
        {
          attribute: 'order',
          explain: '栅格的顺序，在flex布局模式下有效',
          type: 'Number | String',
          default: '-'
        },
        {
          attribute: 'offset',
          explain: '栅格左侧的间隔格数，间隔内不可以有栅格',
          type: 'Number | String',
          default: '-'
        },
        {
          attribute: 'push',
          explain: '栅格向右移动格数',
          type: 'Number | String',
          default: '-'
        },
        {
          attribute: 'pull',
          explain: '栅格向左移动格数',
          type: 'Number | String',
          default: '-'
        },
        {
          attribute: 'class-name | class',
          explain: '自定义的class名称',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'xs',
          explain: '<480px响应式栅格，可为栅格数或一个包含其他属性的对象',
          type: 'Number | Object',
          default: '-'
        },
        {
          attribute: 'sm',
          explain: '<768px响应式栅格，可为栅格数或一个包含其他属性的对象',
          type: 'Number | Object',
          default: '-'
        },
        {
          attribute: 'lg',
          explain: '<992px响应式栅格，可为栅格数或一个包含其他属性的对象',
          type: 'Number | Object',
          default: '-'
        },
        {
          attribute: 'xl',
          explain: '<1200px响应式栅格，可为栅格数或一个包含其他属性的对象',
          type: 'Number | Object',
          default: '-'
        },
        {
          attribute: 'xxl',
          explain: '<1600px响应式栅格，可为栅格数或一个包含其他属性的对象',
          type: 'Number | Object',
          default: '-'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
h1{
  font-size: 20px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p {
  padding: 10px 0;
}
li {
  padding: 5px 0;
}
.m, .n {
  background-color: #3399ff;
  display:flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 1px solid #ccc;
  overflow-y: auto;
}
.f{
  background-color: #3399ff;
  display:flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border: 1px solid #ccc;
  overflow-y: auto;
}
code{
  background-color: #aaa;
}
pre{
  font-size: 14px;
}
</style>
